<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/sasspublic.css">
    <link rel="stylesheet" href="../css/public.css">
    <style>
       #header{
    height: 180px;
}
#header #content{
    height: 100px;
}
#header #content #logo{
    margin: 0;
}
#header #content #search{
    float: right;
    margin: 20px 100px 0 0;
}
.secondBar{
    top:128px;
}
#cart_main{
    width: 83%;
    margin: 0 auto;
}
#filterBar{
    height: 40px;
    width: 100%;
    line-height: 40px;
    position: relative;
    border-bottom-style: solid;
    border-width: 2px;
    border-color: rgb(200,200,200);

}
#filterBar #left{
    float: left;
    font-size: 18px;
    font-weight: bold;
    color: rgb(255, 81, 0);
}
#filterBar #left span{
    padding: 0 10px;
    font-size: 16px;
    font-weight: 500;
}
#filterBar #right{
    float: right;
    font-size: 14px;
}
#filterBar #right p{
    display: inline-block;
    font-size: 14px;
}
#filterBar #right span{
    display: inline-block;
    font-size: 14px;
    color: rgb(255, 81, 0);
    font-weight: bold;
}
#filterBar #right button{
    width: 60px;
    height: 25px;
    background-color: rgb(150,150,150);
    color: rgb(255,255,255);
    border: none;
    border-radius: 4px;
}
#cart_table_th div{
    display: inline-block;
    width: 9%;
    height: 30px;
    line-height: 30px;
    font-size: 14px;
    padding-left: 20px;
}
#cart_table_th #inner{
    width: 29%;
}
.shopgoods{
    width: 100%;
    padding-top: 20px;
}
.shopgoods .shop{
    font-size: 14px;
}
.shopgoods .shop span{
    color: rgb(100,100,100);
}
.shopgoods .shop span:hover{
    color: rgb(255, 81, 0);
    text-decoration: underline;
}
.shopgoods .goods{
    border: 1px solid rgb(170,170,170);
    background-color: rgb(240,240,240);
    padding: 20px;
    font-size: 14px;
}
.shopgoods .goods div{
    display: inline-block;
    height: 80px;
    vertical-align: top;
    padding-right: 10px;
}
.shopgoods .goods img{
    width: 80px;
    height: 80px;
}
.shopgoods .goods .goodsname{
    width: 250px;
}
.shopgoods .goods .goodsnature{
    color: rgb(170,170,170);
    width: 100px;
    margin-left: 100px;
}
.shopgoods .goods .goodsprice{
    font-weight: bold;
}
.shopgoods .goods .number{
    background-color: rgb(168, 162, 162);
    height: 24px;
    margin-left: 50px;
}
.shopgoods .goods .number input{
    width: 40px;
    height: 20px;
    margin: 0 auto;
}
.shopgoods .goods .goodstotal{
    color: rgb(255, 81, 0);
    font-weight: bold;
    width: 100px;
    padding-left: 20px;
}
.shopgoods .goods .delete{
    width: 80px;
    margin-left: 18px;
}
.shopgoods .goods .delete span{
    cursor: pointer;

}
#footsettle{
    position: fixed;
    bottom: 0;
    left: 8.5%;
    width: 83%;
    height: 40px;
    font-size: 14px;
    background-color: rgb(200,200,200);
    color: rgb(100,100,100);
    line-height: 40px;
    text-align: right;
    z-index: 2;
}
#footsettle i{
    font-style: normal;
    padding-left: 50px;
}
#footsettle #settle{
    display: inline-block;
    width: 100px;
    height:  40px;
    background-color: rgb(176,176,176);
    color: rgb(255,255,255);
    font-size: 20px;
    font-weight: bold;
    text-align: center;
}
#footsettle span{
    color: rgb(255, 81, 0);
    font-weight: bold;
    padding: 0 5px;
}
    </style>
</head>
<body>
    <div id="header">
        <div id="nav">
            <div id="left">
                <a href="../index.html">Hi,欢迎来到ht的洋码头！</a>
                <a href="">我是买手</a>
            </div>
            <div id="loginbar">
                <ul>
                    <li><a href="login.html">登录</a></li>
                    <li><a href="logon.html">注册</a></li>
                    <li><a class="cart">购物车</a></li>
                    <li><a href="">我的订单</a></li>
                    <li><a href="">个人中心</a></li>
                    <li><a href="">规则&公告</a></li>
                </ul>
            </div>
        </div>
        <div id="content">
            <div id="logo"><a href=""></a></div>
            <form id="search">
                <input type="text" placeholder="搜索你要找的商品">
                <div id="searchbtn"></div>
            </form>
        </div>
        <div class="nav clearfix">
            <ul>
                <li>首页</li>
                <li>今日限时抢</li>
                <li>洋货集</li>
                <li class="tab">分类 <span></span></li>
            </ul>
        </div>
        <!-- 二级导航 关联上面的 "分类"-->
        <div class="secondBar">
            <ul>
                <li class="nav1">分类 <span></span></li>
                <li class="sbar clearfix">
                </li>
            </ul>
        </div>
    </div>
    <div id="cart_main">
        <div id="filterBar" class="clearfix">
            <div id="left">全部商品<span class="allshopnum">40</span></div>
            <div id="right">
                <p>已选商品（不含运费）</p>
                <span class="total">0.00</span>
                <button>结算</button>
            </div>
        </div>
        <div id="cart_table_th">
            <div><input type="checkbox" class="allcheckbox" name="" id="all"><span>全选</span></div>
            <div>商品信息</div>
            <div id="inner"></div>
            <div>单价</div>
            <div>数量</div>
            <div>金额</div>
            <div>删除</div>
        </div>
        <div class="shopgoods">
        </div>
    </div>
    <div id="footsettle">已选商品<span id="checknumber">0</span>件
        <i>合计（不含运费）：</i><span class="total">0.00</span>
        <div id="settle"> 结算</div>
    </div>
    <div id="last">
        <div id="details">
            <img src="../static/details.png" alt="">
        </div>
        <div id="more">
            <div id="total">
                <ul>
                    <li>购物指南</li>
                    <li>订单服务</li>
                    <li>支付与配送</li>
                    <li>售后服务</li>
                    <li>官方微信</li>
                </ul>
            </div>
            <div id="tomore">
                <ul>
                    <li>注册与登录</li>
                    <li>账户信息维护</li>
                    <li>购物流程</li>
                    <li>会员体系</li>
                    <li>常见问题</li>
                </ul>
                <ul>
                    <li>订单状态说明</li>
                    <li>自动取消顶大</li>
                    <li>上传身份证</li>
                    <li>&nbsp; </li>
                    <li>&nbsp; </li>
                </ul>
                <ul>
                    <li>支付方式</li>
                    <li>优惠劵和红包</li>
                    <li>如何提现</li>
                    <li>配送方式</li>
                    <li>&nbsp; </li>
                </ul>
                <ul>
                    <li>消费维权</li>
                    <li>纠纷处理规则</li>
                    <li>退货规则</li>
                    <li>&nbsp; </li>
                    <li>&nbsp; </li>
                </ul>
                <div>
                    <img id="qrvx" src="../static/QRvx.png" alt="">
                </div>
            </div>
        </div>
        <div id="about">
            <p>关于码头</p><span>|</span>
            <p>码头招聘</p><span>|</span>
            <p>网站地图</p><span>|</span>
            <p>所有帮助</p><span>|</span>
            <p>海外招商中心</p><span>|</span>
            <p>扫货买手规则</p><span>|</span>
            <p>卖家常见问题</p>
        </div>
        <div id="link">
            <p>55bbs我爱购物网</p><span>|</span><p>篱笆网</p><span>|</span><p>闺蜜网</p><span>|</span>
            <p>名品导购网</p><span>|</span><p>瑞丽女性网</p><span>|</span><p>起点中文网</p><span>|</span>
            <p>酷6网</p><span>|</span><p>太平洋返利网</p><span>|</span><p>海外折扣拼团网</p><span>|</span>
            <p>韩都衣舍</p><span>|</span><p>嘉年乐</p><span>|</span><p>为为网购商城</p><span>|</span><br>
            <p>同城购物网</p><span>|</span><p>齐家网</p><span>|</span><p>网上商城</p><span>|</span>
            <p>礼品公司</p><span>|</span><p>留学服务中心</p><span>|</span>
            <p>礼派</p><span>|</span><p>快易拍</p><span>|</span>
            <p>手表</p><span>|</span><p>卡当创意礼物</p><span>|</span><p>户外装备</p><span>|</span>
            <p>母婴展</p><span>|</span><p>微财富理财</p><span>|</span><p>更多>></p>
        </div>
        <div id="auth">
            <div id="imgbox"></div>
            <div>
                <span>© 2009－2019 ymatou.com, All rights reserved 增值电信业务经营许可证：沪B2-20140021</span><br>
                <p>上海洋码头网络技术有限公司  版权所有 备案号（ 沪ICP备11050082号 ）</p><br>
                <span>上海市静安区江场三路93号13层</span>
            </div>
            <div id="footer">
                <div id="business"></div>
                <div id="footerf">
                    <p>沪公网安备 31010802001410号</p><span>|</span> 
                    <span>违法不良信息举报电话：021-80185223</span><span>|</span>
                    <p>上海市互联网上海市互联网举报中心</p><br><br>
                </div>
            </div>
        </div>
    </div>
    <div id="sidebar">
        <ul>
            <li><div id="personal"></div></li>
            <li class="cart"><div id="mycart"></div><span>购物车</span></li>
            <li style="height:60px"><div id="qrsmall"></div></li>
            <li><div id="top"></div><a href="#header">&nbsp;&nbsp;TOP</a></li>
        </ul>
    </div>
    <div id="ycqr">
        <div id="xfqr"><img src="../static/QRvx.png" alt=""></div>
    </div>
</body>
<script src="../js/ajax-promise.js"></script>
<script src="../js/public.js"></script>
<script>
    class Car{
        constructor(){
            this.shopgoods=document.querySelector(".shopgoods");
            this.allshopnum=document.querySelector(".allshopnum");
            this.allcheckbox=document.querySelector(".allcheckbox");
            this.checknumber=document.querySelector("#checknumber");
            this.num=0;
            this.getData();
            this.addEvent();
        }
        getData(){
            if(localStorage.getItem("goodsMsg")){
                this.gm=JSON.parse(localStorage.getItem("goodsMsg"));
            }else{
                this.gm=[];
            }
            this.display();
        }
        // 渲染购物车
        display(){
            var str="";
            for(var i=0;i<this.gm.length;i++){
                str+=`<div index="${this.gm[i].goodsId}">
                            <div class="shop"><input type="checkbox" class="shopallcheck" name="" id="shopall"">店铺：<span>${this.gm[i].msg.brand}</span></div>
                            <div class="goods" index="${this.gm[i].goodsId}">
                                <div><input type="checkbox" class="check checkbox${[i]}"></div>
                                <div ><img src="${this.gm[i].msg.img.smallImg[0]}" alt="" ></div>
                                <div class="goodsname">${this.gm[i].msg.name}</div>
                                <div class="goodsnature"><p>${this.gm[i].msg.gnorms}:<span class="goodscolor">${this.gm[i].msg.size[0]}</span></p></div>
                                <div class="goodsprice">￥<span>${this.gm[i].msg.price}</span></div>
                                <div class="number"><a class="cut">&nbsp;&nbsp;-&nbsp;&nbsp;&nbsp;</a><input type="text" id="sum" value="${this.gm[i].num}" class="number1" ><a class="add">&nbsp;+</a></div>
                                <div class="goodstotal">￥<span>${this.gm[i].msg.price*this.gm[i].num}</span></div>
                                <div class="delete"><span>删除</span></div>
                            </div>
                        </div>`;
                for(var j=i+1;j<this.gm.length;j++){
                    if(this.gm[i].msg.brand===this.gm[j].msg.brand){
                        str+=`<div class="goods" index="${this.gm[j].goodsId}">
                            <div><input type="checkbox" class="check checkbox${[i]}"></div>
                            <div ><img src="${this.gm[j].msg.img.smallImg[0]}" alt="" ></div>
                            <div class="goodsname">${this.gm[j].msg.name}</div>
                            <div class="goodsnature"><p>${this.gm[j].msg.gnorms}:<span class="goodscolor">${this.gm[j].msg.size[0]}</span></p></div>
                            <div class="goodsprice">￥<span>${this.gm[j].msg.price}</span></div>
                            <div class="number"><a class="cut">&nbsp;&nbsp;-&nbsp;&nbsp;&nbsp;</a><input type="text" id="sum" value="${this.gm[j].num}" class="number1" ><a class="add">&nbsp;+</a></div>
                            <div class="goodstotal">￥<span>${this.gm[j].msg.price*this.gm[j].num}</span></div>
                            <div class="delete"><span>删除</span></div>
                        </div>`;
                        i+=1;
                    }
                }
            }
            this.shopgoods.innerHTML=str;
            this.allshopnum.innerHTML=this.gm.length;
        }
        addEvent(){
            var that=this;
            this.allcheckbox.onclick=function(){
                var b=document.querySelectorAll("input");
                if(that.allcheckbox.checked==true){
                    for(var i=0;i<b.length;i++){
                        if(b[i].type=="checkbox"){
                            b[i].checked=true;
                        }
                    }
                    that.checknumber.innerHTML=that.allshopnum.innerHTML;
                }else if(that.allcheckbox.checked==false){
                    for(var i=0;i<b.length;i++){
                        if(b[i].type=="checkbox"){
                            console.log(1)
                            b[i].checked=false;
                        }
                    }
                    that.checknumber.innerHTML=0;
                }
            }
            this.shopgoods.onclick=function(eve){
                var e=eve||window.event;
                var tar=e.target||e.srcElement;
                if(tar.className==="delete"){
                    that.id=tar.parentNode.parentNode.getAttribute("index");
                    tar.parentNode.parentNode.remove();
                    that.changeData(function(i){
                        that.gm.splice(i,1);
                    });
                }
                if(tar.className==="cut"){
                    that.id=tar.parentNode.parentNode.getAttribute("index");
                    tar.nextSibling.value-=1;
                    if(tar.nextSibling.value==0){
                        tar.parentNode.parentNode.remove();
                        that.changeData(function(i){
                            that.gm.splice(i,1);
                        });
                    }
                    if(tar.nextSibling.value<0){
                        tar.nextSibling.value=0;
                    }
                    that.changeData(function(i){
                        that.gm[i].num=tar.nextSibling.value;
                        tar.parentNode.nextElementSibling.lastChild.innerHTML=that.gm[i].num*that.gm[i].msg.price;
                    });
                }
                if(tar.className==="add"){
                    that.id=tar.parentNode.parentNode.getAttribute("index");
                    tar.previousSibling.value=parseInt(tar.previousSibling.value)+1;
                    that.changeData(function(i){
                        that.gm[i].num=tar.previousSibling.value;
                        tar.parentNode.nextElementSibling.lastChild.innerHTML=that.gm[i].num*that.gm[i].msg.price;
                    });
                }
                if(tar.className==="shopallcheck"&&tar.checked==true){
                    var a=tar.parentNode.nextElementSibling.firstElementChild.firstElementChild.className;
                    var b=document.querySelectorAll("input");
                    for(var i=0;i<b.length;i++){
                        if(b[i].className==a){
                            b[i].checked=true;
                        }
                    }
                }else if(tar.className==="shopallcheck"&&tar.checked==false){
                    var a=tar.parentNode.nextElementSibling.firstElementChild.firstElementChild.className;
                    var b=document.querySelectorAll("input");
                    for(var i=0;i<b.length;i++){
                        if(b[i].className==a){
                            b[i].checked=false;
                        }
                    }
                }
                that.checknumber.innerHTML=that.num;
            }
            this.shopgoods.oninput=function(eve){
                var e=eve||window.event;
                var tar=e.target||e.srcElement;
                if(tar.className==="number1"){
                    that.id=tar.parentNode.parentNode.parentNode.getAttribute("index");
                    that.changeData(function(i){
                        that.gm[i].num=tar.value;
                    });
                    tar.parentNode.nextElementSibling.lastChild.innerHTML=tar.value*tar.parentNode.previousElementSibling.lastChild.innerHTML;
                }
            }
        }
        changeData(cb){
            for(var i=0;i<this.gm.length;i++){
                if(this.gm[i].goodsId===this.id){
                    cb(i);
                    break;
                }
            }
            localStorage.setItem("goodsMsg",JSON.stringify(this.gm));
        }
    }
    new Car();
    // 选项卡
    class Tab{
        constructor(){
            this.tab=document.querySelector(".tab");
            this.secondBar=document.querySelector(".secondBar");
            this.nav1=document.querySelector(".nav1");
            this.sbar=document.querySelector(".sbar");
            this.url="http://localhost/ht/yangmatou/src/json/tab.json"
            this.load();
            this.sbar1=document.querySelector(".sbar1");
            this.addEvent();
        }
        addEvent(){
            var that=this;
            that.sbar.onclick=function(){
                location.href="./goodsList.html";
            }
            this.tab.onmouseover=function(){
                that.secondBar.style.display = "block";
            }
            that.tab.onmouseout=function(eve){
                that.secondBar.style.display = "none";
            }
            this.nav1.onmouseover=function(){
                that.secondBar.style.display = "block";
            }
            that.nav1.onmouseout=function(eve){
                that.secondBar.style.display = "none";
            }
            this.sbar.onmouseover=function(){
                that.secondBar.style.display = "block";
            }
            that.sbar.onmouseout=function(eve){
                that.secondBar.style.display = "none";
            }
        }
        load(){
            ajax({
                url:this.url
            }).then((res)=>{
                this.res = JSON.parse(res);
                this.display();
            })
        }
        display(){
            for(var i=0;i<14;i++){
                this.sbar.innerHTML+=`<div class="sbar1">
                        <div class="left"><p>${this.res[i].sorc}<span></span></p><i>${this.res[i].sorcs}</i></div>
                        <div class="right"><img src="${this.res[i].img}" alt=""></div>
                    </div>`;
            }
            this.sbar.innerHTML+=`<div id="sbarlast">
                        <div class="left"><p>更多<span></span></p><i>More</i></div>
                    </div>`;
        }
    }
    // 运行选项卡
    new Tab;
</script>
</html>